<template>
  <div class="app-container">
    <el-card shadow="never" class="main-head">
      <div class="main-title">数据表信息</div>
      <div class="main-contianer">
        <div class="card-img"></div>
        <div class="main-msg">
          <div class="msg-name">{{ clearData.tableName }}</div>
          <div class="msg-date">
            {{ clearData.createTime }}
            {{ clearData.createBy == null ? "admin" : clearData.createBy }}
          </div>
          <div class="msg-detail">
            行数：{{ clearData.total }} | 血缘ID：{{ clearData.dataSource }} |
            数据保存位置：{{ clearData.storeLoc }}
          </div>
        </div>
        <el-button
          size="larg"
          class="passBtn"
          type="danger"
          @click="passCheck()"
          >审核</el-button
        >

        <!-- <el-button ">过审</el-button> -->
      </div>
    </el-card>

    <el-card shadow="never" class="table-card">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px"
      >
        <el-table-column
          :prop="item"
          :label="item"
          align="center"
          class="tableItem"
          :width="item == 'id' ? 80 : 180"
          :fixed="item == 'id' ? true : false"
          v-for="(item, index) in headerMsg"
          :key="index"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      :current-page="page"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="datatotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getPlugInfo,
  getAutoClear,
  getTableList,
  getClearDel,
  getClearUp,
  getSetCondition,
  changeState,
} from "@/api/burnPower/interface";
export default {
  name: "clearDetail",
  data() {
    return {
      clearData: {},
      tableData: [],
      headerMsg: [], //表头信息，
      datatotal: null, //底部数据总数
      pageSize: 10,
      page: 1,
    };
  },
  created() {},
  mounted() {
    this.clearData = this.$route.query;
    this.getClearData();
    console.log(this.clearData);
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getClearData();
    },
    getheaderMsg() {
      if (this.headerMsg.length == 0) {
        for (const key in this.tableData[0]) {
          this.headerMsg.push(key);
        }
      }
      // if (this.field.length == 0) {
      //   for (const key in this.tableData[0]) {
      //     this.field.push({
      //       value: key,
      //       label: key,
      //     });
      //   }
      // }
    },
    //过审
    passCheck() {
      let table = this.clearData.id;
      let dataState = -2;
      let flag = this.clearData.dataState;
      changeState(table, dataState, flag).then(() => {
        this.$router.go(-1);
      });
    },
    getClearData() {
      getTableList(this.clearData.id, this.page, this.pageSize).then((res) => {
        this.tableData = res.data;

        // this.tableData = res.data;
        //  console.info(res.data[res.data.length-1].total)
        this.datatotal = Number.parseInt(res.total);
        this.getheaderMsg();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 14px 16px;
}
.main-head {
  position: relative;
  min-width: 1152px;
  margin: 0 24px 11px 0;
  height: 150px;
  background: #ffffff;
  border-radius: 8px;
  opacity: 1;
  .main-title {
    // position: absolute;
    // top: 14px;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    line-height: 14px;
  }
  .main-contianer {
    margin-top: 13px;
    .card-img {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-right: 7px;
      background: url("./icon.png");
      background-size: cover;
    }
    .main-msg {
      display: inline-block;
      vertical-align: top;
      .msg-name {
        height: 18px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 17px;
        margin-bottom: 16px;
      }
      .msg-date {
        height: 16px;
        font-size: 16px;
        font-family: PuHuiTi-Light, PuHuiTi;
        font-weight: 300;
        color: #999999;
        line-height: 15px;
        margin-bottom: 20px;
      }
      .msg-detail {
        margin-top: 3px;
        height: 18px;
        font-size: 16px;

        font-weight: 400;
        color: #666666;
        line-height: 15px;

        .upbtn {
          width: 120px;
        }
      }
    }
  }
}
.table-card {
  min-width: 1152px;
  margin: 0 24px 11px 0;
  // height: 611px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
}
.passBtn {
  position: absolute;
  width: 100px;
  right: 170px;
  font-size: 18px;
}
</style>
